<template>
	<view class="content">
		<!-- 状态栏占位元素 -->
		<view class="custom-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 顶部导航栏 -->
		<view class="toptopNavigation" :style="{ height: navigationBarHeight + 'px' }">
			<view class="top_1" @click="pageReturn">
				<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20093826001.png" mode=""></image>
			</view>
			<view class="top_2">提词器</view>
			<view class="top_3"></view>
		</view>

		<view class="textArea" style="margin-top: 20rpx">
			<!-- 文本域 （输入框） -->
			<textarea
				:show-confirm-bar="false"
				:adjust-position="false"
				:placeholder="placeholder"
				id="text_textarea"
				:value="textContent"
				@input="textareaV"
				@focus="focus"
				:maxlength="maximumNumberWordsEnter"
			/>
			<!-- 文本框 底部功能 -->
			<view class="toolview2"></view>
			<view class="toolview">
				<view class="textNumber">{{ textContent.length + '/' + maximumNumberWordsEnter }}</view>
				<view class="clearView" @click="intelligentCreation">
					<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20102127003.png" mode=""></image>
					智能创作
				</view>
				<view class="clearView" @click="copyExtraction">
					<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20102128004.png" mode=""></image>
					文案提取
				</view>
				<view class="clearView" @click="deleteText">
					<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20102129005.png" mode=""></image>
					清除文本
				</view>
			</view>
		</view>

		<view class="button_1">
			<view class="button_1_1" @click="goLinesLibrary">台词管理</view>
			<view class="button_1_1" @click="saveLines">保存台词</view>
		</view>
		<view class="button_2" @click="goRecord">前去录制</view>
	</view>
</template>

<script>
import { systemInfo } from '@/utils/mixin.js';
import { NationalVip } from '@/utils/grayControl.js';
export default {
	data() {
		return {
			maximumNumberWordsEnter: 5000,
			placeholder: '请输入或粘贴台词，然后点击下方按钮开始提词',
			textContent: '', //文本输入内容
			keyboardHeight: 0,
			isVip: false
		};
	},
	onLoad() {
		this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
		this.getSystemInfo();
		// #ifdef MP-WEIXIN || MP-KUAISHOU || MP-BAIDU
		uni.onKeyboardHeightChange((res) => {
			let keyboardHeight = res.height;
			let isIPhoneXRegex = this.isIPhoneXRegex() > 0 ? this.isIPhoneXRegex() : 0;
			keyboardHeight = ((keyboardHeight - isIPhoneXRegex) * 750) / uni.getSystemInfoSync().windowWidth;
			if (res.height > 0) {
				this.keyboardHeight = parseInt(keyboardHeight / 1.3);
			} else {
				this.keyboardHeight = 0;
			}
			console.log(parseInt(this.keyboardHeight), '键盘高度');
		});
		// #endif
	},
	onShow() {
		let textTheRaise = uni.getStorageSync('textTheRaise');
		if (!!textTheRaise) {
			this.textContent = textTheRaise;
			uni.setStorageSync('textTheRaise', '');
		}
	},
	mixins: [systemInfo],
	methods: {
		pageReturn() {
			uni.navigateBack();
		},
		goLinesLibrary() {
			uni.navigateTo({
				url: './linesLibrary'
			});
		},
		goRecord() {
			if (!this.isVip) {
			    uni.showToast({
			    	title:'您还不是会员',
					icon:'none'
			    })
				return;
			}

			if (!this.textContent) {
				uni.showToast({
					title: '请输入文本！',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			uni.setStorageSync('textTheRaise', this.textContent);
			uni.navigateTo({
				url: './record'
			});
		},

		saveLines() {
			if (!this.textContent) {
				uni.showToast({
					title: '请输入文本！',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			let lines = uni.getStorageSync('lines') || [];
			let line = {
				title: '',
				Text: this.textContent,
				tiem: uni.$u.timeFormat(new Date(), 'mm-dd hh:MM')
			};
			lines.unshift(line);
			uni.setStorageSync('lines', lines);
			uni.showToast({
				title: '保存成功！',
				duration: 2000
			});
		},

		intelligentCreation() {
			uni.navigateTo({
				url: '/pages_aiTools/creation/creation'
			});
		},

		copyExtraction() {
			uni.navigateTo({
				url: '/pages_aiTools/copywritingExtraction/copywritingExtraction'
			});
		},

		/**
		 * 清除文本
		 */
		deleteText() {
			this.textContent = '';
		},

		/**
		 * 获取是否要适配的机型
		 */
		isIPhoneXRegex() {
			let screenHeight = uni.getSystemInfoSync().screenHeight;
			let bottom = uni.getSystemInfoSync().safeArea.bottom;
			return (screenHeight - bottom) / 2;
		},

		/**
		 * 文本 输入回调
		 * @param {Object} e
		 */
		textareaV(e) {
			this.textContent = e.detail.value;
		},

		/**
		 * @param {Object} e
		 * 光标获取焦点
		 */
		focus(e) {
			// #ifdef MP-TOUTIAO
			let num1 = parseInt(e.detail.height);
			let systemInfo = tt.getSystemInfoSync();
			// 状态栏的高度
			let ktxStatusHeight = systemInfo.statusBarHeight;
			// 导航栏的高度
			let navigationHeight = 50;
			// window的高度
			let ktxWindowHeight = systemInfo.windowHeight;
			// 屏幕的高度
			let ktxScreentHeight = systemInfo.screenHeight;
			// 底部tabBar的高度
			let tabBarHeight = ktxScreentHeight - ktxStatusHeight - navigationHeight - ktxWindowHeight;
			console.log(ktxStatusHeight, ktxWindowHeight, ktxScreentHeight, tabBarHeight, '高度');
			this.keyboardHeight = ((num1 - tabBarHeight) * 750) / tt.getSystemInfoSync().windowWidth - 230;
			// #endif
		}
	}
};
</script>

<style lang="scss">
.button_1 {
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	.button_1_1 {
		width: 330rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #3662ec;
		font-weight: 400;
		font-size: 29rpx;
		color: #2957d1;
		line-height: 40rpx;
		text-align: center;
		line-height: 80rpx;
	}
}
.button_2 {
	margin-top: 20rpx;
	margin-bottom: 50rpx;
	width: 100%;
	height: 87rpx;
	background: #3662ec;
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	font-weight: 400;
	font-size: 29rpx;
	color: #ffffff;
	line-height: 40rpx;
	text-align: center;
	line-height: 87rpx;
}
page {
	background: #f7f9fd;
	background-image: url(https://iflytts.oss-cn-qingdao.aliyuncs.com/images/peiyine/2024/3/20100657002.png);
	background-repeat: no-repeat;
	background-size: 100% 344rpx;
}
.textArea {
	flex: 1;
	display: flex;
	align-items: center;
	flex-direction: column;
	background: #ffffff;
	border-radius: 19rpx;
	transition: all 0.5s ease-out;
	position: relative;
	#text_textarea,
	.view_textarea {
		flex: 1;
		box-sizing: border-box;
		width: 100%;
		font-size: 28rpx;
		padding: 25rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background-color: #ffffff;
		line-height: 35rpx;
		overflow: hidden;
	}
	.toolview2 {
		margin: auto;
		width: 660rpx;
		height: 1rpx;
		background: #ececec;
	}
	.toolview {
		box-sizing: border-box;
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 0 35rpx;
		justify-content: space-between;
		.clearView {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 25rpx;
			color: #808080;
			line-height: 16rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
				margin-right: 7rpx;
			}
		}
		.textNumber {
			// flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #939393;
			text-align: right;
		}
	}
}

.content {
	width: 93%;
	height: 100vh;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.custom-status-bar {
	width: 100%;
}
.toptopNavigation {
	padding: 0 35rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.top_1 {
		width: 36rpx;
		height: 36rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top_2 {
		font-weight: 400;
		font-size: 33rpx;
		color: #2c2c2c;
	}
	.top_3 {
	}
}
</style>
